import { Button, Dialog, Icon, Form, ResponsiveGrid } from '@alifd/next';
import UploadPanel from '@/components/UploadPanel';
import React, { useEffect, useState } from 'react';
import { t } from '@lingui/macro';
import { TitleGrid, model, column } from '../stores/definitions';
import { observer } from 'mobx-react-lite';
import { toJS } from 'mobx';
import AttachmentForm from './AttachmentForm';

const { Cell } = ResponsiveGrid;

/**
 * @description 附件组件
 */
const AttachmentPanel = observer(({ feedback, mode }) => {
  const [curAttachment, setCurAttachment] = useState();
  const [idx, setIdx] = useState(-1); // 当前选中的附件
  const isViewMode = mode === 'view';

  useEffect(() => {
    if (feedback?.attachments?.length) setIdx(0);
  }, [feedback?.attachments]);

  return (
    <>
      <ResponsiveGrid gap={[0, 30]} style={{ paddingLeft: 10 }}>
        <Cell colSpan={5} style={{ paddingTop: 10 }}>
          {idx >= 0 && <UploadPanel
            isPreview={isViewMode}
            prefix={`chanel:${feedback.id}:attachment`}
            binaryIds={idx === -1 ? [] : toJS(feedback.attachments[idx]?.binaryId)}
            onUploaded={(meta) => {
              feedback.attachments[idx]?.binaryId.push(meta.binaryId);
            }}
            onRemove={(info) => {
              feedback.attachments[idx]?.binaryId.splice(feedback.attachments[idx]?.binaryId.findIndex((r) => r == info.uid), 1);
            }}
          />}
        </Cell>
      </ResponsiveGrid>
      <Dialog
        visible={!!curAttachment}
        onCancel={() => setCurAttachment(false)}
        onClose={() => setCurAttachment(false)}
        title={t`附件`}
        style={{ width: '50%' }}
        footer={null}
      >
        <AttachmentForm
          data={curAttachment}
          onSubmit={(data) => {
            _.assign(feedback.attachments[idx], data);
            setCurAttachment(false);
          }}
          onCancel={() => setCurAttachment(false)}
        />
      </Dialog>
    </>
  );
});

export default AttachmentPanel;
